/* eslint-disable no-useless-concat */
import React, { Component } from "react";
import { Toast } from "antd-mobile";
import logo from "../../assest/images/logo.png";
import styles from "./login.module.scss";
import "../../assest/iconfont/icon.css";
export default class index extends Component {
  state = {
    username: "",
    password: "",
    isShow: false,
  };
  handleSubmit = (e) => {
    e.preventDefault();
    const { username, password } = this.state;
    if (username === "") {
      Toast.info("请输入手机号和密码", 1);
      return false;
    }
    var reg1 = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9])\d{8}$/;
    if (reg1.test(username)) {
      if (username === "19147003487" && password === "123456") {
        this.props.history.push("/home");
        Toast.info("登录成功", 2);
      } else {
        Toast.info("手机号和密码不符", 1);
      }
    } else {
      Toast.info("手机号格式错误", 1);
    }
  };
  saveUsername = (e) => {
    this.setState({
      username: e.target.value,
    });
  };
  savePassword = (e) => {
    this.setState({
      password: e.target.value,
    });
  };
  changePassBox = () => {
    if (this.state.isShow === false) {
      this.refs.password.type = "text";
    } else {
      this.refs.password.type = "password";
    }
    this.setState({
      isShow: !this.state.isShow,
    });
  };
  render() {
    const { username, password, isShow } = this.state;
    return (
      <div className={styles.wrapper}>
        <div className={styles.login}>
          <div className={styles.header}>
            <div
              className="left"
              onClick={() => {
                window.history.back();
              }}
            >
              <i className="iconfont iconzuojiantou"></i>
            </div>
          </div>
          <div className={styles.logo}>
            <img src={logo} alt="天星教育" className={styles.logoImg} />
          </div>
          <form
            method="post"
            className={styles.form}
            onSubmit={this.handleSubmit}
          >
            <div>
              <i className={"iconfont " + "icon-user-fill " + styles.left}></i>
              <input
                type="text"
                name="username"
                id={styles.user}
                placeholder="手机号或用户名"
                onChange={this.saveUsername}
                ref="username"
              />
              <i
                className={
                  username !== ""
                    ? "iconfont icon-qingchu2 " + styles.right
                    : ""
                }
                onClick={() => {
                  this.refs.username.value = "";
                  this.setState({
                    username: "",
                  });
                }}
              ></i>
            </div>
            <div>
              <i className={"iconfont " + "iconsuo " + styles.left}></i>
              <input
                type="password"
                name="password"
                id={styles.pass}
                placeholder="密码"
                onChange={this.savePassword}
                ref="password"
                autoComplete="off"
              />
              <i
                className={
                  password !== ""
                    ? "iconfont " +
                      "icon-qingchu2 " +
                      styles.clear +
                      " " +
                      styles.right
                    : ""
                }
                onClick={() => {
                  this.refs.password.value = "";
                  this.setState({
                    password: "",
                  });
                }}
              ></i>
              <i
                className={
                  isShow
                    ? "iconfont " +
                      "icon-mimayanjingdakai " +
                      styles.openPass +
                      " " +
                      styles.right
                    : "iconfont " + "icon-mima-yanjing-guanbi " + styles.right
                }
                onClick={this.changePassBox}
              ></i>
            </div>
            <button className={styles.loginBtn}>登录</button>
          </form>
          <div className={styles.footer}>
            <span
              onClick={() => {
                Toast.info("该功能不可用", 1);
              }}
            >
              快速注册
            </span>
            <span>|</span>
            <span
              onClick={() => {
                Toast.info("该功能不可用", 1);
              }}
            >
              找回密码
            </span>
          </div>
        </div>
      </div>
    );
  }
}
